<template>
    <div class="disOrder flexv">
        <!-- 头部 -->
        <pubHead title="分销订单" ></pubHead>

        <div class="lists">
            <!-- <van-list @load="getData" :finished="finished" v-model="loading"> -->
                <div class="list flexv" v-for="(item,index) in list" :key="index" v-if="list.length!=0">
                    <div class="head jus-b">
                        <span class="left">订单编号：{{item.order_no}}</span>
                        <span class="right">{{item.create_time}}</span>
                    </div>

                    <!-- 商品 -->
                    <div class="goods_box flex" v-for="(item1,index1) in item.goods" :key="index1">
                        <div class="goods_img flex">
                            <img :src="item1.images" alt="">
                        </div>

                        <div class="goods_infos flex1 flexv jus-b">
                            <p class="title twoline">{{item1.goods_name}}</p>

							<div class="flex jus-b" style="font-size:0.3rem;color:#333;">
								 <p class="price">
								 <span v-if="item1.activity_type==2">秒杀价:</span>
								 <span v-if="item1.activity_type==3">今日特价:</span>
								 <span v-if="item1.activity_type==4">团购价:</span>
								 <span v-if="item1.activity_type==5">团购价:</span>
								 <span v-if="item1.activity_type==6">砍购价:</span>
								 <span v-if="item1.activity_type==1">￥{{item1.goods_price}}</span>
								  <span v-if="item1.activity_type!=1">￥{{item1.marketing_price}}</span>
								 </p>
								 <p>X{{item1.num}}</p>
							</div>
                        </div>
                    </div>

                    <!-- 订单信息 -->
                    <div class="order_info flex" v-if="item.user!=null">
                        <span class="name tc flex1">下单人</span>
                        <span class="text over_hiden">{{item.user.nickname}}</span>
                        <span class="name tc flex1">手机号</span>
                        <span class="text">{{item.user.mobile}}</span>
                    </div>

                    <div class="total_info jus-b">
                        <p class="name ali-b">下单金额:&nbsp;<span>￥{{item.act_pay_money}}</span></p>
                        <p class="name ali-b">预计收入:&nbsp;<span>￥{{item.money}}</span></p>
                    </div>

                </div>
            <!-- </van-list> -->
        </div>

        <div class="empty_box flexv flexc" v-if="list.length==0">
            <img src="@/assets/nor.png" alt="">
            <p class="tc">暂时没有分销订单哦~</p>
        </div>
        
    </div>
</template>
<script>
import Vue from 'vue';
import { Toast, List } from 'vant';
import { disOrder } from '@/request/api';
import pubHead from '@/components/head';

Vue.use(Toast, List);
export default {
    data(){
        return{
            isNone: false,
            // 列表相关
            list: [],
            page: 1,
            pagesize: 15,
            loading: false,
            finished: false,
        }
    },
    components: {
        pubHead,
        "van-list": List,
    },
    created(){
        this.getData()
    },
    methods: {
        getData(){
            let that = this
			that.$loading()
			disOrder({
				token: localStorage.getItem('token') ? localStorage.getItem('token') : '',
				pagesize:20,
				page:that.page
			}).then(res=>{
				Toast.clear();
				that.list = res.data.list
			})
        },
    },
}
</script>
<style lang="less" scoped>
.disOrder{
    min-height: 100vh;
    background-color: #f5f5f5;
    // 列表
    .lists{
        .list{
            margin-bottom: 0.2rem;
            background-color: #fff;
            .head{
                height: 0.82rem;
                padding: 0 0.3rem;
                border-bottom: 1px solid #e6e6e6;
                .left{
                    font-size: 0.26rem;
                    line-height: 0.82rem;
                    color: #333;
                }
                .right{
                    font-size: 0.22rem;
                    line-height: 0.82rem;
                    color: #999;
                }
            }
            // 商品信息
            .goods_box{
                padding: 0.3rem;
                .goods_img{
                    width: 1.5rem;
                    height: 1.5rem;
                    border-radius: 0.1rem;
                    border: 1px solid #f5f5f5;
                    overflow: hidden;
                    img{
                        margin: auto;
                    }
                }
                .goods_infos{
                    margin-left: 0.24rem;
                    .title{
                        font-size: 0.3rem;
                        line-height: 150%;
                        color: #333;
                    }
                    .price{
                        font-size: 0.3rem;
                        line-height: 120%;
                        color: #EF2424;
                    }
                }
            }
            // 订单信息
            .order_info{
                width: calc(100% - 0.6rem);
                height: 0.56rem;
                margin: 0 auto;
                border: 1px solid #e6e6e6;
                font-size: 0.26rem;
                line-height: calc(0.56rem - 2px);
                color: #333;
                .name{
                    background-color: #eee;
                    border-right: 1px solid #e6e6e6;
                }
                .text{
                    width: 1.84rem;
                    padding: 0 0.1rem;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
                }
				.over_hiden{
				
				}
            }
            .total_info{
                height: 0.8rem;
                margin-top: 0.24rem;
                padding: 0 0.3rem;
                border-top: 1px solid #e6e6e6;
                font-size: 0.24rem;
                line-height: 0.8rem;
                color: #666;
                .name{
                    span{
                        color: #EF2424;
                    }
                }
            }
        }
    }
    // 空列表
    .empty_box{
        height: calc(100vh - 0.88rem);
        img{
            width: 3.24rem;
            height: 3.06rem;
            margin: 0 auto;
        }
        p{
            margin-top: 0.24rem;
            font-size: 0.32rem;
            line-height: 120%;
            color: #666;
        }
    }
}
</style>